<template>
	<view class="content">
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>
			<view class="content_top_box">
				<view class="content_top_box_left">
					<view class="content_top_box_left_hi">
						Hi~
					</view>
					<view class="content_top_box_left_name">
						{{name}}
					</view>
					<view class="content_top_box_left_num">
						电话：{{PHONE_NUMBER}}
					</view>
				</view>
				<view class="content_top_box_right">

					<tn-avatar size="xl"
						:src="RLZP_FJ"></tn-avatar>
						<view class="content_top_box_right_change" @click="to">
							点击修改头像
						</view>
				</view>
			</view>
		</view>
		<view class="content_bottom" >
			
			<view class="content_bottom_list">
				<view class="content_bottom_list_dj" @click="toRegistrationSuccessful()">
					<view class="content_bottom_list_dj_left">
						<view class="content_bottom_list_dj_left_name">
							我的项目
						</view>
						<view class="content_bottom_list_dj_left_detail">
							项目信息查询
						</view>
					</view>
					<view class="content_bottom_list_dj_right">
						<image src="../../static/img/xm.png"  style="width: 114rpx;height: 114rpx;"></image>
					</view>
				</view>
				<view class="content_bottom_list_dj" @click="toDone()">
					<view class="content_bottom_list_dj_left">
						<view class="content_bottom_list_dj_left_name">
							待办跟踪
						</view>
						<view class="content_bottom_list_dj_left_detail">
							待办流程查看及状态跟踪
						</view>
					</view>
					<view class="content_bottom_list_dj_right">
						<image src="../../static/img/done.png"  style="width: 130rpx;height: 100rpx;"></image>
					</view>
				</view>
			</view>
			<view class="content_bottom_title">
				上海市基础工程集团有限公司
			</view>
		</view>
		<TabBar selectedIndex=0></TabBar>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '../../utils/request.js'
	import TabBar from "../../components/tabbar.vue";
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				img: '',
				USER_NAME:'',
				PHONE_NUMBER:'',
				name:'',
				RLZP_FJ:''
			}
		},
	computed: {
		//判断是什么角色
		// selectedTabIndex() {
		// 	let dept=uni.setStorageSync('IS_LEADER', response.data.IS_LEADER);
		// 		return dept !== '0' ? 1 : 2;
		// },
	},
		onLoad() {
		 
		},
		 onShow() {
		       //⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
		      uni.hideTabBar({
		        animation:false
		     })
			 let that = this;
			 //接收裁剪好的图片参数‘updateimg’
			  that.getdetail();
		    },
		 mounted() {
			
			 // this.fetchData();
			 this.getdetail();
			 this.PHONE_NUMBER=uni.getStorageSync('phoneNumber');
		    // 在页面加载完成后调用 uni.hideTabBar() 方法来隐藏分包管理人员的 tabBar
		    // uni.hideTabBar({
		    //   animation: true, // 可选，是否需要动画效果，默认为 true
		    //   success: function() {
		    //     console.log('成功隐藏分包管理人员的 tabBar');
		    //   },
		    //   fail: function(err) {
		    //     console.error('隐藏分包管理人员的 tabBar 失败：', err);
		    //   }
		    // });
		  },
		methods: {
			async getdetail(){
				try {
				  const url = '/portal/r/w'; // 替换为你的 API 地址
				const params = {
					// 构造你的请求参数
				sid:uni.getStorageSync('SID'),
				cmd:'com.awspaas.user.apps.sfeg.srm.supplier.subcontracting.home',
				openId: uni.getStorageSync('OPEN_ID'),
			
				phoneNumber:uni.getStorageSync('phoneNumber'),
				};
							
				  // 发送 POST 请求
				  const response = await this.$get(url, params);
						uni.setStorageSync('USER_NAME', response.data.USER_NAME);	
						uni.setStorageSync('lwphoto', response.data.url);	
				  // 处理请求成功的逻辑
				  console.log('请求成功个人数据', response);
				  this.name=response.data.USER_NAME;
				  	this.RLZP_FJ = response.data.url
				
				
				} catch (error) {
				  // 处理请求失败的逻辑
				  console.error('请求失败', error);
				}
			},
		
			to() {
			uni.navigateTo({
						url: '../../pages/paizhao/paizhao'
					})
				// uni.chooseImage({
				// 	//选择图片进入裁剪页进行修改，将图片临时地址传给参数‘img’
				// 	success: (res) => {
				// 		this.tempimg = res.tempFilePaths[0]
				// 		uni.navigateTo({
				// 			url: '../../pages/paizhao/paizhao?img=' + this.tempimg
				// 		})
				// 	}
				// })
			
			},
			toDone(){
				uni.navigateTo({
				   url: '../toDone/toDone'
				 });
			},
			toRegistrationSuccessful() {
				uni.navigateTo({
				   url: '../myProject/myProject'
				 });
				
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 73rpx 73rpx 0 73rpx;

			.content_top_box_left {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
			}
			.content_top_box_left_num{
				    font-family: PingFang SC;
				    font-weight: 500;
				    font-size: 24rpx;
				    color: #FFFFFF;
					    margin-top: 30rpx;
			}

			.content_top_box_right {
				.content_top_box_right_change{
					    font-family: PingFang SC;
					    font-weight: 500;
					    font-size: 24rpx;
					    color: #EEEEEE
				}
			}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 295rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */
		height: calc(100% - 295rpx);
		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;
		.content_bottom_xm {
			background: #F1FAFF;
			box-shadow: 0rpx 7rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx;
			margin: 33rpx;
			position: relative;
			/* padding: 52rpx;wxcs_style_padding; */
			padding: 28rpx 27rpx 28rpx 27rpx;

			.content_bottom_xm_name {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #3A3A3A;
			}

			.content_bottom_xm_fjname {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-top: 28rpx;
			}

			.content_bottom_xm_dept {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-top: 28rpx;
			}

			.content_bottom_xm_time {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-top: 28rpx;
			}

			.content_bottom_xm_img {
				position: absolute;
				right: 37rpx;
				bottom: 37rpx;
			}
		}

		.content_bottom_title {

			font-family: PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			/* margin-top: auto; */
			text-align: center;
			position: absolute;
			bottom: 200rpx;
			left: 27%;
		}

		.content_bottom_list {
			margin: 33rpx;

			.content_bottom_list_dj {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
				border-radius: 21rpx;
				padding: 33rpx;
				margin-top: 28rpx;

				.content_bottom_list_dj_left {
					.content_bottom_list_dj_left_name {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
					}

					.content_bottom_list_dj_left_detail {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						margin-top: 24rpx;
					}
				}
			}
		}

	}
</style>